{% extends "announcements/announcements.html" %}

{% block page_link %}
    <script src="../../static/announcements/js/classify.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../static/announcements/css/style.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div style="width: 10%;height: 100%;line-height: 40px;">
            <a href="classification.html" style="color: #0b0b0b;">
                <i class="iconfont icon-fenlei1"></i>
                <span> 公告分类</span>
            </a>
        </div>
    </div>

    <div class="right-box" style="width: 19%;height: 93%;">
        <div style="margin-left: 10%;margin-top: 5%;">
            <ul id="treeDemo" class="ztree" style="font-size: 14px"></ul>
        </div>
    </div>

    <div class="right-box" style="width: 80.3%;height: 93%;">
        <div class="section">
            <label for="">分&nbsp;类&nbsp;名&nbsp;称：</label>&nbsp;
            <input id="industry_title" class="form-control section-input" type="text" placeholder=" 请输入部门名称">
        </div>
        <div class="section">
            <label for="">上&nbsp;级&nbsp;分&nbsp;类：</label>&nbsp;
            <input id="superior_department" class="form-control section-input" type="text" placeholder=" 请输入上级部门">&nbsp;&nbsp;&nbsp;
            <span data-toggle="modal" data-target=".bd-example-modal-xl" onclick="delete_val()"><a href="#" style="font-size: 10px;">选择</a></span>
        </div>
        <div class="section">
            <button onclick="new_department()" type="submit" class="btn btn-primary">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
            <button id="delete-dep" type="button" class="btn btn-danger" style="margin-left: 6%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删&nbsp;&nbsp;除&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
        </div>
    </div>


    <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"   aria-hidden="true">
        <div class="modal-dialog modal-xl" style="margin-top: 3%;">
            <div class="modal-content"  style="height: 600px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
                <div class="modal-header" style="height: 50px;">
                    <h5 class="modal-title" style="line-height: 50px;width: 10%;">选择上级分类</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"  style="margin-right: 3%;line-height: 50px;">
                        <span aria-hidden="true" style="font-size: 28px;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 450px;">
                    <div style="display: inline-block;width: 30%;height: 70%;margin-left: 1%;border-right: #E8E8E8 solid 1px;overflow: auto;">
                        <ul id="treeDemo1" class="ztree"></ul>
                    </div>
                    <div style="display: inline-block;width: 67.5%;height: 70%;overflow: auto;">
                        <div style="width: 100%;height: 35px;text-align: right;line-height: 40px;">
                            <input id="checkboxID" type="checkbox" style="vertical-align:middle; margin-top:-2px;" onclick="check_input()"> <span>显示所有下级分类</span>
                        </div>
                        <div id="Ztree-label">

                        </div>
                    </div>
                    <div style="height: 30%;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;">
                        <div id="checked-label" style="margin-top: 1%;margin-left: 3%;">

                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="height: 50px;">
                    <button id="model-close" type="button" class="btn btn-secondary" data-dismiss="modal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关&nbsp;闭&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    <button id="model-affirm" type="button" class="btn btn-primary" style="margin-left: 2%;margin-right: 2%;" onclick="summit_val()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确&nbsp;认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script src="../../static/public_file/js/jquery.min.js"></script>
    <script src="../../static/system_setup/js/jquery.ztree.all.min.js"></script>
    <script src="../../static/system_setup/js/django.ajax.post.csrf.js"></script>
{% endblock %}
